<#assign base=request.contextPath />

<html>

<head>
    <title>Title</title>
    <!-- Bootstrap -->
    <link href="${base}/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <link rel="icon" href="${base}/img/asset-favicon.ico">
    <link rel="stylesheet" href="${base}/plugins/normalize-css/normalize.css"/>
    <link rel="stylesheet" href="${base}/plugins/bootstrap/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="${base}/css/page-learing-index.css"/>
    <link rel="stylesheet" href="${base}/css/loading.css"/>

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<#include 'header.ftl'>
<div class="container panel panel-default" style="background-color:white">
    <div class="row" style="padding: 15px;">
        <form id="form1" method="post">
            <div class="row">
                <div style="float: left;margin-left: 10px">
                    <label>针对</label>
                </div>

                <div class="col-sm-3" style="float: left">
                    <select name="chapterId" class="form-control" id="chapterList">
                    </select>
                </div>
                <div style="float: left">
                    <label>提问题</label>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-1">问题:</div>
            </div>

            <div class="row">
                <div class="col-sm-6 form-group">
                    <textarea id="quTitle" class="form-control" name="title"></textarea>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-1">
                    <button id="submitQu" type="button" class="btn btn-success">
                        发布
                    </button>
                </div>
                <input type="hidden" name="courseId" id="idCourse">

            </div>
        </form>
    </div>
</div>

<footer class="container-fluid">
    <div class="row">
    </div>
</footer>

</body>
<script src="${base}/js/jquery-2.1.4.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="${base}/js/bootstrap.js"></script>

<script>
    $(function () {
        /*查询章节并赋值给下拉框*/
        var optionString = "";

        //获取地址栏课程id

        //将课程id赋值给隐藏的input框 冗余字段
        $("#idCourse").val(${courseId});

        //调用ajax get方法 发送到qu/title
        $.get("${base}/chapter", {courseId: ${courseId}},
                function (data) {
                    //遍历data，将其中的章节赋值给下拉框
                    $.each(data.data, function (index, obj) {
                        if (obj.parent !== 0) {
                            //设置章节id传给后台
                            optionString += "<option value=" + obj.id + ">" + obj.title + "</option>";
                        }
                    });
                    //加载下拉框
                    $("#chapterList").html(optionString);
                });

        /*发送问题至后台更新*/
        $("#submitQu").click(function () {
            var content = $("#quTitle").val();
            if (content == null || content == "" || content.replace(/\s*/g, "") == "") {
                alert("问题不能为空!");
                return;
            } else {
                $.ajax({
                    url: "${base}/question",
                    type: "post",
                    data: $("#form1").serialize(),
                    success: function (result) {
                        if (result.code == 200) { //更新问题成功
                            window.location.href = "${base}/question/" + result.data.id;
                        } else if (result.code == 400) {
                            alert("更新问题失败!");
                        } else if (result.code == 300) {
                            //重定向至登陆页面

                        }
                    }
                })
            }

        })

    })

</script>
</html>
